<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="btn">点我，再挂载Vue实例</button>

    <!-- 挂载点元素外面能否使用相关数据呢？ -->
    <p>{{ msg }}</p>

    <!-- 
      挂载点元素
     -->
    <div id="app">
      <!-- 使用插值表达式（双花括号语法），应用数据 -->
      <h1>{{ msg }}</h1>
    </div>

    <!-- 引入 Vue 类库文件 -->
    <script src="../lib/vue.js"></script>
    <script>
      // 创建 Vue 的实例

      const vm = new Vue({
        // 配置选项

        // el - 指定挂载点元素，必须的配置项，用于告诉 Vue 那块内容归你来控制
        //      值可以是一个 css 选择器，内部会使用 document.querySelector
        //           是一个 DOM 对象
        //      可以后续通过实例对象的$mount()再挂载
        // el: "#app",

        // data - 声明状态数据，声明的数据可以直接用在挂载点元素内容上。
        //      值是一个 对象的写法，也可以是一个函数返回对象的写法
        //      PS: 在 Vue3 的时候，这块必须写成函数返回对象的形式
        data: {
          msg: "hello",
          foo: "bar",
        },
      });

      console.log("vm", vm);
      // vm 身上有很多 $xxx 的属性，这些属性叫做 实例属性
      // vm.msg vm.foo  叫做 代理属性，在Vue2中，这些代理属性，是通过ES5中的 Object.defineProperty() 来代理到实例对象上的。可以看到有一些 get 与 set 相关的函数

      document.querySelector("#btn").onclick = function () {
        // $xxxx 开头的方法，叫做 实例方法
        vm.$mount("#app");
      };
    </script>
  </body>
</html>
